<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>投票结果大屏</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <style>
        body {
            background-color: #fff0f5; /* 浅粉背景 */
            padding: 40px;
            font-family: "Microsoft YaHei", sans-serif;
        }
        h1 {
            text-align: center;
            color: #d63384;
            font-weight: bold;
            margin-bottom: 40px;
        }
        .stats {
            text-align: center;
            margin-bottom: 30px;
        }
        .stats h4 {
            font-weight: normal;
            color: #c71585;
        }
        .pair-card {
            background: linear-gradient(135deg, #ffdde1 0%, #ee9ca7 100%);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            color: #fff;
            font-size: 22px;
            font-weight: bold;
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .pair-card:hover {
            transform: scale(1.05);
        }
        .pair-icon {
            font-size: 28px;
            margin: 0 10px;
        }
        .refresh-note {
            text-align: center;
            color: #888;
            font-size: 14px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>💖 单身青年联谊会 · 配对结果展示大屏 💖</h1>
    <div class="text-center mt-3">
      <button onclick="document.querySelector('audio').play()"
              style="background: none; border: none; color: #d63384; font-size: 16px; cursor: pointer;">
          🔊 点击播放背景音乐
      </button>
</div>
    <div class="container mb-4">
    <div class="card p-4 shadow-sm" style="background-color: #ffe6f5; border-radius: 12px;">
        <div class="row text-center">
            <div class="col-md-6 mb-2">
                <h4 class="mb-0" style="color: #c71585;">
                  总投票数：
                  <span id="totalVotes" style="color: #8e44ad; font-weight: bold;">{{ total_votes }}</span>
                </h4>

            </div>
            <div class="col-md-6 mb-2">
                <h4 class="mb-0" style="color: #c71585;">
                  成功配对：
                  <span id="matchCount" style="color: #8e44ad; font-weight: bold;">{{ matches|length }} 对</span>
                </h4>
            </div>
        </div>
    </div>
</div>
    <div id="matchArea">
    <div class="row justify-content-center ">
        {% for pair in matches %}
        <div class="col-md-4 col-sm-6">
            <div class="pair-card text-center">
                {{ pair.user1.number }}
                <span class="pair-icon">❤️</span>
                {{ pair.user2.number }}
            </div>
        </div>
        {% endfor %}
    </div>
    </div>
    <audio autoplay loop hidden>
        <source src="../static/MP3/1.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放。
    </audio>
    <script>
    async function refreshMatches() {
    try {
        const res = await fetch('/screen_votes_only/data');
        const data = await res.json();

        // ✅ 更新统计区域数字
        document.getElementById('totalVotes').innerText = data.total_votes;
        document.getElementById('matchCount').innerText = data.match_count;

        const container = document.querySelector('#matchArea .row');
        container.innerHTML = ''; // 清空旧内容

        data.matches.forEach(pair => {
            const col = document.createElement('div');
            col.className = 'col-md-4 col-sm-6';
            col.innerHTML = `
                <div class="pair-card text-center">
                    ${pair.user1}
                    <span class="pair-icon">❤️</span>
                    ${pair.user2}
                </div>
            `;
            container.appendChild(col);
        });
    } catch (err) {
        console.error("刷新配对失败：", err);
        }
    }
    setInterval(refreshMatches, 10000);
    console.log("刷新中...");
</script>

</body>
</html>
